<template>
  <el-container class="layout-container-demo" style="height: 900px">
    <el-aside  id="aside"  :style="{ width: asideWidth + 'px'}" >   <!-- 动态限制宽度,加了就会有下拉的箭头 -->
       <el-scrollbar >   <!-- 侧边栏滑动条 --> 
           <el-menu :default-active="activeIndex" class="el-menu-vertical-demo"   :collapse="isCollapse" :collapse-transition="false" > <!--:collapse-transition="false" 关掉折叠过度效果,也可以自定义-->
      <el-sub-menu v-for="item in menuItems" :index="item.index" :key="item.index">
          <template #title>
           <el-icon :class="item.iconClass"><HelpFilled /></el-icon>
              <!-- <el-icon :class="item.iconClass"><{{item.iconClass}} /></el-icon> -->
           <span>  {{ item.label }}</span>
      </template>  
        <template v-if="item.children">
          <el-menu-item v-for="child in item.children" :index="child.index" :key="child.index" @click="$router.push(child.router)"  >
          <el-icon :class="item.iconClass"><Setting /></el-icon>
            {{ child.label }}
          </el-menu-item>
        </template>
      </el-sub-menu>
    </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      
      <el-header style="text-align: left; font-size: 15px">
          
        <div class="toolbar">
          
          <el-radio-group v-model="isCollapse"  >
          <el-radio-button :value="false"@click="zhank()">展开</el-radio-button>
          <el-radio-button :value="true" @click="zhed()">折叠</el-radio-button>
          </el-radio-group>
          

          <el-dropdown style="text-align: right; font-size: 15px;padding-left: 1500px; ">
            <el-icon style="margin-right: 12px; margin-top: 2px; ">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>注销</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
                <el-dropdown-item>更换头像</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main style="background-color: beige;">
          <router-view :v-if="isRouteLoaded"></router-view>
      </el-main>
    </el-container> 
  </el-container>
</template> 

<script lang="ts" setup>
import { ref,reactive } from 'vue'
import { Menu as IconMenu, Message, Setting, User, HelpFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';   // npm install vue-router@4  没有的话安装下
import { RouterView,RouterLink } from 'vue-router';  
const router = useRouter(); // 获取路由
const isCollapse = ref(false); //控制菜单栏的展开折叠变量
const activeIndex = ref('1');
let asideWidth = ref(150); // 侧边栏的宽度 
const isRouteLoaded = ref(false);  //

//折叠控制边框宽度
function zhed(){
  asideWidth.value = 60;
}

 //折叠控制边框宽度
 function zhank(){
  asideWidth.value = 150;
}

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}

// 路由主页面
const goMain=(path: string)=> {
  
  //router.push(path);
}
 

const tableData = ref(Array.from({ length: 10 }).fill(item))

const menuItems = ref([
{ 
  index: '1', 
  label: '用户管理',
  iconClass: 'el-icon-user',
  router:'/user', 
  children: [
    { index: '1-1', label: '用户列表', iconClass: 'el-icon-list' , router:'/user' },
    { index: '1-2', label: '用户添加', iconClass: 'el-icon-plus' , router:'/adduser'}
  ]
},
{ 
  index: '2', 
  label: '订单管理',
  iconClass: 'el-icon-order',
  router:'/user', 
  children: [
    { index: '2-1', label: '订单列表', iconClass: 'el-icon-document' , router:'/user' },
    { index: '2-2', label: '订单详情', iconClass: 'el-icon-info' , router:'/user' }
  ]
},
{ 
  index: '3', 
  label: '商品管理',
  iconClass: 'el-icon-goods',
  router:'/user', 
  children: [
    { index: '3-1', label: '商品列表', iconClass: 'el-icon-goods-list'  , router:'/user'},
    { index: '3-2', label: '商品列表', iconClass: 'el-icon-goods-list' , router:'/user' },
    { index: '3-3', label: '商品列表', iconClass: 'el-icon-goods-list' , router:'/user' },
    { index: '3-4', label: '商品列表', iconClass: 'el-icon-goods-list' , router:'/user' },
    { index: '3-5', label: '商品列表', iconClass: 'el-icon-goods-list' , router:'/user' },
    { index: '3-6', label: '商品添加', iconClass: 'el-icon-plus-square'  , router:'/user'}
  ]
},
{ 
  index: '4', 
  label: '会员管理',
  iconClass: 'el-icon-goods',
  router:'/user', 
  children: [
    { index: '4-1', label: '新增会员', iconClass: 'el-icon-goods-list' , router:'/user' },
    { index: '4-2', label: '新增会员', iconClass: 'el-icon-goods-list' , router:'/user' },
    { index: '4-3', label: '新增会员', iconClass: 'el-icon-goods-list' , router:'/user' },
    { index: '4-4', label: '新增会员', iconClass: 'el-icon-goods-list' , router:'/user' },
    { index: '4-5', label: '删除会员', iconClass: 'el-icon-plus-square' , router:'/user' }
  ]
},
]);

let items = ref({})

function dianji(name){
      alert(name);    

}






</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
  width: auto;
}
</style>
